<template>
  <table style="width: 100%">
    <colgroup>
      <col v-for="col in columns" :width="col.width" :key="col.prop"/>
    </colgroup>
    <thead>
      <tr>
        <th
            v-for="col in columns" :key="col.prop"
            style="padding: 10px 12px"
            :class="styles['th']"
        >{{ col.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td
            v-for="col in columns" :key="col.prop"
            :style="{
              padding: '10px 12px',
              textAlign: col.align || 'left'
            }"
            :class="{[styles['td-stripe']]: rowIndex %2 === 0}"
        >
          {{ row[col.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup name="PrintTable">
const props = defineProps({
  columns: Array,
  rows: Array
})
</script>

<style lang="less" module="styles" src="./index.less"></style>
